import {} from 'react'
import { Tooltip } from 'antd'
import style from './index.module.less'
import { colors } from '@js/config'

// 获取颜色样式,并设置鼠标样式
function getColorStyle (s: string, tags: string[], cursor = false) {
  const i = tags.indexOf(s)
  if (i === -1) {
    return {}
  }
  const m: { [k: string]: any } = {
    backgroundColor: colors[((i + 1) % colors.length) - 1],
  }
  if (cursor) {
    m.cursor = 'pointer'
  }
  return m
}

interface Props {
  noticeMap: {
    [k: string]: {
      title: string,
      clickHandle?: () => void
    }
  }
  showTags: string[]
  tags: string[]
}

function Main ({ noticeMap, tags, showTags }: Props) {
  return (
    <div className={style.container}>
      {showTags.map(li => {
        const m: { title: string, clickHandle?: () => void } = noticeMap[li]
        if (!m) {
          return (
            <div key={li} className={style.tag} style={getColorStyle(li, tags, true)}>
              <span>{li}</span>
            </div>
          )
        }
        const fn = typeof m.clickHandle === 'function' ? m.clickHandle : () => {}
        return (
          <Tooltip title={m.title} key={li}>
            <div key={li} className={style.tag} style={getColorStyle(li, tags, true)} onClick={fn}>
              <span>{li}</span>
            </div>
          </Tooltip>
        )
      })}
    </div>
  )
}

export default Main
